import {Outlet, useNavigate, useLocation} from 'react-router-dom'
import Menu, {MenuItem} from 'components/Menu'
import s from './index.module.scss'

const menus: MenuItem[] = [
  { type: 'section', label: '基础组件', key: '001' },
  { type: 'menu', label: 'Icon 图标', icon: '', tagType: '', path: './', key: '002' },
  { type: 'menu', label: 'Button 按钮', icon: '', tagType: '', path: 'button', key: '003' },
  { type: 'menu', label: 'Radio 单选框', icon: '', tagType: '', path: 'radio', key: '004' },
  { type: 'menu', label: 'Modal 弹窗', icon: '', tagType: '', path: 'modal', key: '005' },
  { type: 'menu', label: 'Autocomplete 补全', icon: '', tagType: '', path: 'autocomplete', key: '006' },
  { type: 'section', label: '语法案例', key: '007' },
  { type: 'menu', label: 'counter 普通计数', icon: '', tagType: '', path: 'counter', key: '008' },
  { type: 'menu', label: 'timer 定时器', icon: '', tagType: '', path: 'timer', key: '009' },
  { type: 'menu', label: 'effect 副作用', icon: '', tagType: '', path: 'effect', key: '010' },
  { type: 'menu', label: 'anime 动画', icon: '', tagType: '', path: 'anime', key: '011' },
  { type: 'menu', label: 'lottie 老铁', icon: '', tagType: '', path: 'lottie', key: '012' },
  { type: 'menu', label: 'performance 性能', icon: '', tagType: '', path: 'performance', key: '013' },
  { type: 'menu', label: 'useImprativeHandle', icon: '', tagType: '', path: 'imprativeHandle', key: '014' },
  { type: 'menu', label: 'useContext', icon: '', tagType: '', path: 'context', key: '015' },
  { type: 'menu', label: 'useSyncExternalStore', icon: '', tagType: '', path: 'useSyncExternalStore', key: '016' },
  { type: 'menu', label: 'useDeferredValue', icon: '', tagType: '', path: 'useDeferredValue', key: '017' },
  { type: 'menu', label: 'priority 优先级', icon: '', tagType: '', path: 'priority', key: '018' },
  { type: 'menu', label: 'LazyLoad 懒加载', icon: '', tagType: '', path: 'lazyload', key: '019' },
  { type: 'menu', label: 'Tabs 切换', icon: '', tagType: '', path: 'tabs', key: '020' },
]

export default function Cases() {
  const nav = useNavigate()
  const location = useLocation()

  function menuClickHandker(menu: MenuItem) {
    nav(menu.path)
  }

  return (
    <div className={s.container}>
      <div className={s.sidenav}>
        <Menu menus={menus} onClick={menuClickHandker} defaultKey='002' />
      </div>
      <div className={s.content}>
        <Outlet />
      </div>
    </div>
  )
}
